import Taro from '@tarojs/taro'
import React, { useState } from 'react'
import { View, Image, ScrollView } from '@tarojs/components'
// import { AtModal, AtModalHeader, AtModalContent, AtIcon } from "taro-ui"
import './subPage.scss'

function TeamPage({data = {}}) {
    const { alternateList=[], players = 5 } = data
    const [playerInfoVisible, setPlayerInfoVisible] = useState()

    function showPlayerInfo(info) {
        setPlayerInfoVisible(true)
    }

    function renderTeamList(data) {
        const { players = 5, blue=[{name: 'Ronalde',avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2718992591,1608277910&fm=15&gp=0.jpg'}], 
            red=[{name: 'Messi', avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596963031803&di=d71dc415e4d6e65b041df624a0591435&imgtype=0&src=http%3A%2F%2Fimgsa.baidu.com%2Fexp%2Fw%3D500%2Fsign%3Db90b706181b1cb133e693c13ed5556da%2Fbba1cd11728b471034b1e642cfcec3fdfd0323a5.jpg', captain: true}, 
                {name: '内马尔', avatar:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=664281491,947966788&fm=26&gp=0.jpg'}] } = data
        const list = []
    
        for(let i = 0; i < players; i++) {
            list.push(
                <View key={i} className='listItem'>
                    <View style={{display: 'flex'}}>
                        <View className={`avatar${!red[i] ? ' empty' : ''}`}>
                            {
                                red[i] ? <Image onClick={() =>showPlayerInfo(red[i])} src={red[i].avatar} mode='aspectFit'/> : 
                                red[i - 1] ? '+' : '?'
                            }
                        </View>
                        {
                            red[i] && 
                            <View className='name'>
                                <View>{red[i].name}</View>
                                {
                                    red[i].captain &&
                                    <View className='tag'>队长</View>
                                }
                            </View>
                        }
                    </View>
                    <View style={{display: 'flex'}}>
                        {
                            blue[i] && 
                            <View className='name'>
                                <View>{blue[i].name}</View>
                                {
                                    blue[i].captain &&
                                    <View className='tag'>队长</View>
                                }
                            </View>
                        }
                        <View className={`avatar${!blue[i] ? ' empty' : ''}`}>
                            {
                                blue[i] ? <Image onClick={() =>showPlayerInfo(blue[i])}  src={blue[i].avatar} mode='aspectFit'/> : 
                                blue[i - 1] ? '+' : '?'
                            }
                        </View>
                    </View>
                </View>
            )
        }
    
        return list
    }

    if(alternateList.length < 5) {
        let length = 5 - alternateList.length
        for(let i = alternateList.length; i < length; i++){
            alternateList.push('?')
        }
    }
    
    return <ScrollView className='scroll'>
            <View className='listItem'>
                <View className='sideTag red'>红队</View>
                <View>{`${players} V ${players}`}</View>
                <View className='sideTag blue'>蓝队</View>
            </View>
            {
                renderTeamList(data)
            }
            <View className='alternate'>
                本场替补(0/5)
            </View>
            <View className='listItem'>
                {
                    alternateList.map((item, index) =>
                        <View key={index} className='avatar empty'>{item}</View>
                    )
                }
            </View>
            <View className='bottom'>
                <View className='status'>组队中({players}/{players * 2})</View>
                <View style={{display: 'flex'}}>
                    <View className='btn invite'>
                        <Image mode='aspectFit' src=''/>
                        邀请好友
                    </View>
                    <View className='btn join'>立即加入</View>
                </View>
            </View>
            {/* <AtModal isOpened={playerInfoVisible} closeOnClickOverlay={false}>
                <AtModalHeader>
                    个人信息
                </AtModalHeader>
                <AtModalContent>
                    123123
                </AtModalContent>
            </AtModal> */}
        </ScrollView>
}

export default TeamPage
